<template>
  <div class="comments">
    <!--     根据comments -->
    <h1>{{ '评论' + getCommons }}</h1>
    <!--    发送评论-->

    <div class="sendComment">
      <input v-model="newCommentText" @keyup.enter="submitComment">

      <i class="iconfont icon-send " @click="submitComment" />
    </div>

    <!--    评论列表-->
    <div class="comments-card">

      <div v-for="(comment ,index) in comments" :key="index" class="comments-item">

        <span class="com-avatar"><img src="./avator.png" alt=""></span>
        <div class="comments-detail">
          <span class="username">{{ comment.userId }} </span>
          <span class="comments"> {{ comment.content }}</span>
          <span class="comments-time-delete">
            <i class="time">{{ comment.creatTime }}</i>
            <i style="margin-left: 2vw" class="iconfont icon-pinglun" />
            <span>评论</span>
            <i style="margin-left: 2vw" class="iconfont  icon-shanchu" />
            <span>删除</span>

          </span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getCommon, insertCommon } from '@/api/post'
import { mapGetters } from 'vuex'
import getters from '@/store/getters'
import { get } from 'core-js/internals/internal-state'
import { parseDateString } from '@/utils/timeFormat'

export default {
  props: {
    comments: [],
    postId: null
  },
  data() {
    return {

      newCommentText: '', // 用户输入的新评论内容
      commentCount: '' // 评论数量

    }
  },
  mounted() {
    let count = 0
    for (const commentsKey in this.comments) {
      console.log(commentsKey)
      count++
    }
    this.commentCount = count
  },
  computed: {
    ...mapGetters([
      'avatar', 'name'
    ]),

    getCommons() {
      get()
      {
        let count = 0
        for (const commentsKey in this.comments) {
          count++
        }

        return count
      }
    }

  },
  methods: {
    submitComment() {
      // 完成后更新 this.comments
      // 然后清空输入框
      //
      console.log('用戶頭像')
      console.log(this.avatar)
      this.comments.push({
        id: this.comments.length + 1,
        author: 'Current User', // 假设当前用户为 "Current User"
        text: this.newCommentText
      })

      // 发送请求 插入comments
      insertCommon({
        answer: this.newCommentText,
        postId: this.postId
      }).then(response => {
        const { code } = response
        // 如果插入成功重新请求数据
        if (code === 200) {
          getCommon({
            postId: this.postId // 发送编码后的消息
          }).then(response => {
            // 接受返回的名称
            const { data } = response
            this.comments = data
            for (let i = 0; i < this.comments.length; i++) {
              this.comments[i].creatTime = parseDateString(this.comments[i].creatTime)
            }
            console.log(data)
          }).catch(_error => {
            throw _error
          })
        }
      }).catch(_error => {
        throw _error
      })

      this.newCommentText = ''// 提交后清空输入框内容
    }
  }

}
</script>

<style lang="scss" scoped>

.comments {
  border-radius: 3vw;
  padding: 2vw;

  .sendComment {
    display: flex;
    width: 80%;
    margin: 0 auto;
    text-align: center;

    .icon-send {
      font-size: 30px;
      transform: translateX(-5vw);
      color: #2a60c9;
    }

    input {
      width: 100%;
    }
  }

  .comments-card {
    position: relative;
    width: 80%;
    margin: 0 auto;
    text-align: center;

    .com-avatar {
      width: 4vw;
      height: 4vw;
      border-radius: 50%;
      overflow: hidden;

      img {
        height: 4vw;
        width: 4vw;
      }

    }

    .comments-item {
      margin: 6vw 0;
      display: flex;

      .comments-detail {
        .comments {
          background: linear-gradient(45deg , rgba(125, 62, 69, 0.1), rgba(12,33,43,0.2));
          width: 100vh;
          border-radius: 0;
        }
        .username{
          transform: translate(0,-.5vw);
          color: rgba(35, 29, 29, 0.9);
          font-weight: bold;
          font-size: 1vw  ;
        }
        text-align: left;
        margin-left: 2vw;
        display: flex;
        flex-direction: column;

        .comments-time-delete {
          display: flex;
          flex-direction: row;

          .time {
            //background: rgba(61, 189, 61, 0.4);
            font-size: 0.8vw;
            color: rgba(138, 139, 131, 0.4);
          }
        }
      }

    }
  }

}

/* 样式 */
</style>

